<template>
  <div class="home">
    <el-row><br></el-row>
    <el-row justify="space-around">
      <el-col span="8">
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#4e4e4e"
            @open="handleOpen"
            @close="handleClose"
            router="true">
          <el-menu-item>
            <el-input placeholder="搜索……" v-model="input" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="route_to_list_name"></el-button>
            </el-input>
          </el-menu-item>
          <el-menu-item index="/">
            <i class="el-icon-plus"></i>
            <span slot="title">推荐</span>
          </el-menu-item>
          <el-menu-item index="/News">
            <i class="el-icon-document"></i>
            <span slot="title">新闻</span>
          </el-menu-item>
          <el-submenu index="/">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>分类</span>
            </template>
            <el-menu-item-group>
              <div v-for="type in types" v-bind:key="type.typeId" class="type_sub_menu">
                <el-menu-item :index="type.typeId" @click="route_to_list_type(type)">{{ type.typeName }}</el-menu-item>
              </div>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
      <el-col span="16">
        <div style="display: flex; flex-direction: column; justify-content: space-around;">
          <div class="Display">
            <el-carousel trigger="click" height="360px">
              <el-carousel-item v-for="item in imgs" v-bind:key="item.url">
                <el-image
                    :src="item.url"
                    style="height: 360px; width: 640px;"
                    @click="route_to_game(item)">
                </el-image>
              </el-carousel-item>
            </el-carousel>

          </div>
        </div>
      </el-col>
      <br>

    </el-row>


  </div>
</template>

<style scoped>
.home {

}

.Display {
  color: white;
  overflow: hidden;
  text-align: center;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #4e4e4e;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #4e4e4e;
}

</style>

<script>
import {get_gameTypes} from '@/api/game'

export default {
  name: 'Home',
  components: {},
  data: function () {
    return {
      input: '',
      platform: 'pc',
      imgs: [
        {url: require('@/assets/game_pics/pix_sustech1.png'), id: 1, name: '123'},
        {url: require('@/assets/2.jpg'), id: 2, name: '123'},
        {url: require('@/assets/3.jpg'), id: 3, name: '123'},
        {url: require('@/assets/4.jpg'), id: 4, name: '123'},
        {url: require('@/assets/5.jpg'), id: 5, name: '123'},
      ],
      types: [],
    }
  },
  mounted() {
    get_gameTypes().then(response => {
      console.log(response)
      let code = response.data.code;
      if (code == 200) {
        this.types = response.data.data;
      }
    })
  },
  methods: {
    // 游戏跳转方法
    route_to_game(item) {
      this.$router.push({path: '/game', query: {id: item.id}})
    },
    // 列表跳转方法
    // 类型搜索跳转
    route_to_list_type(item) {
      this.$router.push({path: '/list', query: {type: item.typeId}})
    },
    // 按名称搜索
    route_to_list_name() {
      this.$router.push({path: '/list', query: {name: this.input}})
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>
